<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Holy</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../js/lib/jquery.js"></script>
<script type="text/javascript" src="../../js/lib/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="../../js/lib/trimpath.js"></script>
<script type="text/javascript" src="../../js/lib/jquery.holyavenger.js"></script>
<script type="text/javascript" src="../../js/lib/jquery.holyavenger.trimpath.js"></script>
<script type="text/javascript" src="../../js/lib/jquery.corner.js"></script>
<script type="text/javascript" src="../../js/lib/snippet/jquery.snippet.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/lib/snippet/jquery.snippet.css" />
<script type="text/javascript" src="../../js/snippetsource/jquery.snippetsource.js"></script>
<!-- LIBS  -->
<script type="text/javascript" src="../../js/holycomponents/jquery.holy.components.js"></script>
<script type="text/javascript" src="../../js/sendformbyframe/jquery.sendformbyframe.js"></script>
<script type="text/javascript" src="../../js/dialog/jquery.dialog.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/dialog/jquery.dialog.css" />
<script type="text/javascript" src="../../js/togglepanel/jquery.togglepanel.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/togglepanel/togglepanel.css" />
<script type="text/javascript" src="../../js/tabpanel/jquery.tabpanel.js"></script>
<script type="text/javascript" src="../../js/datepicker/jquery.datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/datepicker/datepicker.css" />
<script type="text/javascript" src="../../js/dropdown/jquery.dropdown.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/dropdown/dropdown.css" />
<link rel="stylesheet" type="text/css" href="../../js/flexigrid/flexigrid.css" />
<script type="text/javascript" src="../../js/flexigrid/flexigrid.js"></script>
<script type="text/javascript" src="../../js/message/jquery.message.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/message/message.css" />
<script type="text/javascript" src="../../js/forms/jquery.forms.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/forms/forms.css" />
<!-- COMPONENTES -->
<link rel="stylesheet" type="text/css" href="base.css"/>
<link rel="stylesheet" type="text/css" href="components.css"/>
<script type="text/javascript" src="events.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="wrapper">
  <div id="header">
    <h1><a href="#index">Holy Demo <span>liquid blue</span></a></h1>
    <div class="dropdown"></div>
  </div>
  <ul class="message">
  	<!-- 
    <li class="error">Error message <a href="#!">x</a></li>
    <li class="success">Success message <a href="#!">x</a></li>
    <li class="info">Information message <a href="#!">x</a></li>
    <li class="warning">Warning message <a href="#!">x</a></li>
     -->
  </ul>
  <div id="content">
    <h3>Tabela de resultados</h3>
    <table class="grid" style="display: none">
    </table>
    <script type="text/javascript">
		$(".grid").flexigrid({
			url : '../../../template/flexigrid.xml',
			dataType : 'xml',
			colModel : [ {
				display : 'ISO',
				name : 'iso',
				width : 40,
				sortable : true,
				align : 'center'
			}, {
				display : 'Name',
				name : 'name',
				width : 180,
				sortable : true,
				align : 'left'
			}, {
				display : 'Printable Name',
				name : 'printable_name',
				width : 120,
				sortable : true,
				align : 'left'
			}, {
				display : 'ISO3',
				name : 'iso3',
				width : 130,
				sortable : true,
				align : 'left',
				hide : true
			}, {
				display : 'Number Code',
				name : 'numcode',
				width : 80,
				sortable : true,
				align : 'right'
			} ],
			buttons : [ {
				name : 'Add',
				bclass : 'add',
				onpress : test
			}, {
				name : 'Delete',
				bclass : 'delete',
				onpress : test
			}, {
				separator : true
			} ],
			searchitems : [ {
				display : 'ISO',
				name : 'iso'
			}, {
				display : 'Name',
				name : 'name',
				isdefault : true
			} ],
			sortname : "iso",
			sortorder : "asc",
			usepager : true,
			title : 'Countries',
			useRp : true,
			rp : 15,
			showTableToggleBtn : true,
			height : 200
		});

		function test(com, grid) {
			if (com == 'Delete') {
				confirm('Delete ' + $('.trSelected', grid).length + ' items?')
			} else if (com == 'Add') {
				alert('Add New Item');
			}
		}
	</script>
  </div>
  <div id="footer">
    <div id="copyright"> Live Demo :: HoLy Avanger. &copy; 2011 <a href="http://www.dextra.com.br">Dextra Sistemas</a>. </div>
  </div>
</div>
</body>
</html>
